/**
 * 品牌页组件
 */
<script setup>
import BrandGeo from '@/components/brand/BrandGeo.vue'
import BrandTop from '@/components/brand/BrandTop.vue'
import BrandCenter from '@/components/brand/BrandCenter.vue'
import BrandBottom from '@/components/brand/BrandBottom.vue'
import FactoryPopup from '@/components/brand/BrandPopups/FactoryPopup.vue'
import BrandPopup from '@/components/brand/BrandPopups/BrandPopup.vue'
import SeriesPopup from '@/components/brand/BrandPopups/SeriesPopup.vue'
import ModelPopup from '@/components/brand/BrandPopups/ModelPopup.vue'
import WarehousingPopup from '@/components/brand/BrandPopups/WarehousingPopup.vue'
</script>

<template>
  <div class="brand-container">
    <div class="brand-below">
      <BrandGeo/>
    </div>

    <div class="brand-above">
      <div class="brand-top">
        <BrandTop/>
      </div>

      <div class="brand-center">
        <BrandCenter/>
      </div>

      <div class="brand-bottom">
        <BrandBottom/>
      </div>
    </div>
  </div>

  <FactoryPopup/>
  <BrandPopup/>
  <SeriesPopup/>
  <ModelPopup/>
  
  <WarehousingPopup/>
</template>

<style lang="scss" scoped>
.brand-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #12161b;

  .brand-below {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .brand-above {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

    .brand-top {
      width: 100%;
      height: 5%;
      margin-bottom: 1%;
    }

    .brand-center {
      width: 100%;
      height: 13%;
      margin-bottom: 1%;
    }

    .brand-bottom {
      width: 100%;
      height: 78%;
    }
  }
}
</style>